add task solution #4934
add task solution #4934
Conversation
wiltonmartinsdev
commented
Dec 21, 2024
wiltonmartinsdev
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your submission! 🎉 The code meets the core requirements and functions as expected. While there are a couple of minor issues, such as the inconsistency in class naming within media queries and the repeated product card details, these do not significantly impact functionality. Keep up the good work and consider addressing these minor points for future improvements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| </div> | ||
| <h1 class="product-card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h1> | ||
| <h2 class="product-card__code">Product code: 195434</h2> | ||
|
|
||
| <div class="product-card__reviews"> | ||
| <div class="stars"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <p class="product-card__reviews-text">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="product-card__price"> | ||
| <p class="product-card__price-label">Price:</p> | ||
| <p class="product-card__price-value">$2,199</p> | ||
| </div> | ||
| <button | ||
| type="button" | ||
| class="product-card__buy-button" | ||
| > | ||
| BUY | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="product-card"> | ||
| <div class="product-card__image-container"> | ||
| <img | ||
| src="./images/imac.jpeg" | ||
| alt="imac" | ||
| class="product-card__image" | ||
| /> | ||
| </div> | ||
| <h1 class="product-card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h1> | ||
| <h2 class="product-card__code">Product code: 195434</h2> | ||
|
|
||
| <div class="product-card__reviews"> | ||
| <div class="stars"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <p class="product-card__reviews-text">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="product-card__price"> | ||
| <p class="product-card__price-label">Price:</p> | ||
| <p class="product-card__price-value">$2,199</p> | ||
| </div> | ||
| <button | ||
| type="button" | ||
| class="product-card__buy-button" | ||
| > | ||
| BUY | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="product-card"> | ||
| <div class="product-card__image-container"> | ||
| <img | ||
| src="./images/imac.jpeg" | ||
| alt="imac" | ||
| class="product-card__image" | ||
| /> | ||
| </div> | ||
| <h1 class="product-card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h1> | ||
| <h2 class="product-card__code">Product code: 195434</h2> | ||
|
|
||
| <div class="product-card__reviews"> | ||
| <div class="stars"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <p class="product-card__reviews-text">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="product-card__price"> | ||
| <p class="product-card__price-label">Price:</p> | ||
| <p class="product-card__price-value">$2,199</p> | ||
| </div> | ||
| <button | ||
| type="button" | ||
| class="product-card__buy-button" | ||
| > | ||
| BUY | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
The product card details are repeated multiple times with the same content. If this repetition is intentional for demonstration purposes, it is fine. However, if the content is meant to be dynamic or different for each card, consider using a template engine or JavaScript to dynamically generate these cards with varying content.
src/styles/header.scss
Outdated
| &--active { | ||
| position: relative; | ||
| color: $blue-accent-color; | ||
|
|
||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| width: 100%; | ||
| height: 4px; | ||
| background-color: $blue-accent-color; | ||
| position: absolute; | ||
| bottom: 0; | ||
| border-radius: 8px; | ||
|
|
||
| transition: background-color 300ms ease; | ||
| } | ||
| } |
There was a problem hiding this comment.
In the media query for max-width: 1024px, the active link class is defined as &--active. However, in the media query for min-width: 1024px, it is defined as &.is-active. Ensure consistency in class naming to avoid confusion and potential styling issues.
